<template>
  <div>
    
    <el-aside width="240px" >
      <img src="../assets/logo_colored.png" height='69px' width="69px" style= "margin-left:70px;margin-top:30px;opacity: 0.9;">
      <img src="../assets/logo2.jpg" height='69px' width="180px" style="float:left;opacity: 0.6;margin-left:23px;">
      <el-menu router  text-color="#000000" active-text-color="#ffd04b" style="overflow: hidden">
        <!-- <el-menu-item index="/home">
          <i class="el-icon-setting"></i>
          <span slot="title">工作台</span>
        </el-menu-item>
        <el-menu-item index="/hme">
          <i class="el-icon-setting"></i>
          <span slot="title">数据分析</span>
        </el-menu-item>
        <el-menu-item index="/hme">
          <i class="el-icon-setting"></i>
          <span slot="title">任务管理</span>
        </el-menu-item>
        <el-menu-item index="/hme">
          <i class="el-icon-setting"></i>
          <span slot="title">公司管理</span>
        </el-menu-item>  
        <el-menu-item index="/hm">
          <i class="el-icon-setting"></i>
          <span slot="title">人员管理</span>
        </el-menu-item> -->

        <el-menu-item :index='list[index].index' v-for = "(item, index) in list" :key="item.id" @click="activeIndex=index"
        >
          <span slot="title" :class="{active:index === activeIndex}" style="padding-left: 40px; "  >
            <i :class="item.icon"></i>{{item.name}} </span>
        </el-menu-item> 
        
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    
    return{   
      activeIndex:0,
      list:[
      {id:1,icon:'el-icon-takeaway-box',name:'工作台',index:"/work"},
      {id:2,icon:'el-icon-house', name:'首页管理',index:"/index"},
      {id:3,icon:'el-icon-news',name:'新闻动态',index:"/news"},
      {id:4,icon:'el-icon-copy-document',name:'项目介绍',index:"/project"},
      {id:5,icon:'el-icon-connection', name:'团队介绍',index:"/team"},
      {id:6,icon:'el-icon-circle-plus-outline', name:'加入我们',index:"/join"},
      {id:6,icon:'el-icon-user', name:'管理员',index:"/admin"},
      ],
    }
  },

}
</script>

<style scoped>
.el-aside {
  position: fixed;
  z-index: 100;
  /* top: 80px; */
  height: 100%;
  border-radius: 10px;
  overflow-x: hidden;
  background-image: linear-gradient(130deg, #FAF8F4 0%, #fdeeda 53%);
  &::before, &::after{
    position: absolute;
    content: '';
    background-image: url(@/assets/leftbackground.png);
    background-size: 183px 168px;
    z-index: 0;
    width: 183px;
    height: 168px;
  }
   /* &::after{
     left: auto;
     top: -140px;
     right: -160px;
  } */

  /* background-color: #333; */
  border-right: 1px solid #cdc7c7;

}
.el-menu .active{
  /* background-color: #835156; */
  background: #a60101;
  opacity: 0.5;
  border: rgb(236, 140, 43) 2px solid;
  height:100%;
  width:100%;
  margin: 0;
  display: inline-block;
  justify-content: space-between;
  font-size: larger;
  border-radius: 10px;
  z-index: 10;
}
.el-menu {
  width: 100%;
  margin-top: 100px;
  overflow: hidden;
  /* background-color:#333 */
  background-image: linear-gradient(130deg, #FAF8F4 0%, #fdeeda 53%);
  &::before, &::after{
    position: absolute;
    content: '';
    background-image: url(@/assets/leftbackground.png);
    background-size: 183px 168px;
    z-index: 0;
    width: 183px;
    height: 168px;
  }
  border-right: 1px solid #888;

}
.el-menu-item {
  width: 80%;
  overflow: hidden;
  display: inline-block;
  margin: 0;
  padding: 0!important;
  border-radius: 97px;
}
.el-menu-item:hover {
  color: rgb(231, 182, 109);
  background-color:#c4e4ea
}


</style>